<script lang="ts" setup>
import { isDark } from '@/utils/is'
import { useAppStore } from '@/store/modules/app'
import { useDesign } from '@/hooks/web/useDesign'
import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
import routerSearch from '@/components/RouterSearch/index.vue'
import CreateTraymenu from '@/windows/tray/menu'
import { getCurrentWindow } from '@tauri-apps/api/window';
import { getAccessToken } from './utils/auth';


const route = useRoute() // 路由对象
const routePath = ref(route.fullPath)

defineOptions({ name: 'APP' })

const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('app')
const appStore = useAppStore()
const currentSize = computed(() => appStore.getCurrentSize)
const greyMode = computed(() => appStore.getGreyMode)
const { wsCache } = useCache()
const titlebarRef = ref(null)
const titlebarId = ref('div'+new Date().getTime())

// 根据浏览器当前主题设置系统主题色
const setDefaultTheme = () => {
  let isDarkTheme = wsCache.get(CACHE_KEY.IS_DARK)
  if (isDarkTheme === null) {
    isDarkTheme = isDark()
  }
  appStore.setIsDark(isDarkTheme)
}
setDefaultTheme()

const dragTitlebar = (e) => {
  if (e.buttons === 1) {
    const appWindow = getCurrentWindow();
    // Primary (left) button
    e.detail === 2
      ? appWindow.toggleMaximize() // Maximize on double click
      : 
      appWindow.startDragging(); // Else start dragging
  }
}
const titlebarMinimize = ()=> {
    console.log("titlebarMinimize")
    const appWindow = getCurrentWindow();
    appWindow.minimize()
}
const toggleMaximize = async()=> {
    console.log("toggleMaximize")
    const appWindow = getCurrentWindow();
    debugger
    // if(!await appWindow.isFullscreen()){
    //   appWindow.toggleMaximize()
    appWindow.maximize()
    // }
}
const closeWin = ()=> {
    const appWindow = getCurrentWindow();
    appWindow.close()
}
onMounted(()=>{
  // 如果desktop
  CreateTraymenu()
  document.getElementById(titlebarId.value)?.addEventListener('mousedown', dragTitlebar)
  document.getElementById(titlebarId.value+'titlebar-minimize')?.addEventListener('mouseup', titlebarMinimize)
  document.getElementById(titlebarId.value+'titlebar-maximize')?.addEventListener('mouseup', toggleMaximize)
  document.getElementById(titlebarId.value+'titlebar-close')?.addEventListener('mouseup', closeWin)
  // 判断是否登录，如果登录，则最大化窗口
  if(getAccessToken()){
    toggleMaximize()
  }
})

</script>
<template>
  <div ref="titlebarRef" v-if="!routePath.includes('tray/menu')" class="titlebar">
    <div :id="titlebarId" style="width: 90%;">
      
    </div>
    <div 
      class="titlebar-button" :id="titlebarId+'titlebar-minimize'" >
      <img
        src="https://api.iconify.design/mdi:window-minimize.svg"
        alt="minimize"
      />
    </div>
    <!-- <div class="titlebar-button" :id="titlebarId+'titlebar-maximize'" v-if="appStore.getMaxWin">
      <img
        src="https://api.iconify.design/mdi:window-maximize.svg"
        alt="maximize"
      />
    </div> -->
    <div class="titlebar-button" :id="titlebarId+'titlebar-close'">
      <img src="https://api.iconify.design/mdi:close.svg" alt="close" />
    </div>
  </div>
  <ConfigGlobal :size="currentSize">
    <RouterView :class="greyMode ? `${prefixCls}-grey-mode` : ''" />
    <routerSearch />
  </ConfigGlobal>
</template>
<style lang="scss">
$prefix-cls: #{$namespace}-app;

.size {
  width: 100%;
  height: 100%;
}

html,
body {
  @extend .size;

  padding: 0 !important;
  margin: 0;
  overflow: hidden;

  #app {
    @extend .size;
  }
}

.#{$prefix-cls}-grey-mode {
  filter: grayscale(100%);
}
</style>
